<div class="flex flex-row items-center relative">
  <label
    *ngIf="showTitle"
    class="block uppercase tracking-wide text-gray-800 text-xs font-bold mr-2 whitespace-no-wrap"
    [attr.for]="id"
  >
    {{ title }}
  </label>
  <select
    [id]="id"
    (change)="this.selectValue.emit($event.target.value)"
    class="block w-full bg-white border border-gray-300 text-gray-800 py-2 px-3 pr-6 rounded leading-tight focus:outline-none focus:border-primary"
  >
    <option
      *ngFor="let choice of choices"
      [value]="choice.value"
      [selected]="isSelected(choice)"
    >
      {{ choice.label | translate }}
    </option>
  </select>
  <div
    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-800"
  ></div>
</div>
